<!-- 我的 -->

<template>
  <div class="mine">
    <div class="mine-usename">{{user.nickname}}</div>
    <div class="mine-avatar"><img v-lazy="avatar" /></div>
    <!-- <div class="mine-edit-info">
      <span class="icon-arrow-right" @click="gotoEditUserInfo">编辑个人信息</span>
    </div> -->
    <!-- <cross-line></cross-line> -->
    <group>
      <cell title="手机号" v-model="user.phone"   @click.native="onEditPhone" is-link></cell>
      <cell title="地址" v-model="address" link="/EditAddress" is-link></cell>
      <cell title="学生" v-model="student.name" link="/student-list" is-link></cell>
    </group>

    <tab-bar></tab-bar>
  </div>


    

</template>



<script>
import TabBar from "@/components/base/tab-bar/tab-bar";
import CrossLine from "@/components/base/cross-line/cross-line";
import { mapGetters } from "vuex";

import {
  Cell,
  Group,
  XAddress,
  XButton,
  TransferDomDirective as TransferDom
} from "vux";

export default {
  components: {
    TabBar,
    CrossLine,
    Cell,
    Group,
    XAddress,
    XButton,
    TransferDom
  },
  data() {
    return {
      editPhone: false,
      user: {
        nickname: null,
        avatar: "/static/img/723b362509ba64ee680576df250dc8b0.jpg",
        phone: null
      },
      avatar: "/static/img/723b362509ba64ee680576df250dc8b0.jpg",
      address: "请完善信息"
    };
  },
  props: {},
  watch: {},
  methods: {
    gotoEditUserInfo(type) {
      this.$router.push(`/EditUserInfo`);
    },
    // 初始化列表数据
    _initUserData() {
      this.$$api_user_userInfo({
        data: this.userID,
        fn: res => {
          this.user = res[0];
        }
      });
    },
    getUserAddress(userId) {
      this.$$api_user_addressInfo({
        data: userId,
        fn: res => {
          console.log("res:", res);
          if (res.length > 0) {
            let address = res[0];

            // if (address.length > 0) {
            this.address = address.city + " " + address.area;
            // }
          } else {
            this.address = "请完善信息";
          }
        }
      });
    },
    _addUser() {
      this.$$api_user_addUser({
        data: {
          phone: "18357128679",
          nickname: "zhangjie2",
          password: "123123"
        },
        fn: res => {
          this.user = res[0];
        }
      });
    },
    _updateUser() {
      let _data = {
        id: this.user.id,
        nickname: this.user.nickname,
        phone: this.phone
      };
      this.$$api_user_updateUser({
        data: _data,
        fn: res => {
          // this.goBack();
          // MessageBox.alert(res.msg);
          this.user.phone = this.phone;
        },
        errFn: res => {
          console.log("api_user_updateUser errFn res2::", res);
          if (res.status == 200010) {
            this.toastWarn(res.msg);
          } else {
            this.toastWarn("服务器开小差了！");
          }
        }
      });
    },
    toastWarn(msg) {
      this.toast("warn", msg);
    },
    toast(type, msg) {
      this.$vux.toast.show({
        type: type,
        width: "12em",
        text: msg,
        time: 2000,
        isShowMask: true
      });
    },

    onConfirm(v) {
      console.log("on confirm", v);
      if (!v) return;
      if (v != this.user.phone) {
        this.phone = v;
        this._updateUser();
      }
    },
    onEditPhone() {
      const _this = this;
      this.$vux.confirm.show({
        title: "修改手机号",
        showInput: true,
        placeholder: "请填写手机号",
        theme: "android",
        onCancel() {
          console.log("onCancel");
        },
        onConfirm(v) {
          console.log("onConfirm");
          _this.onConfirm(v);
        },
        onShow() {
          _this.$vux.confirm.setInputValue(_this.user.phone);
          console.log("onShow", this);
        },
        onHide() {
          console.log("onHide");
        }
      });
    }
  },
  filters: {},
  computed: {
    ...mapGetters(["userID", "student"])
  },
  created() {
    this._initUserData();
    this.getUserAddress(this.userID);
  },
  mounted() {},
  destroyed() {}
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/base.scss";
@import "~@/assets/scss/const.scss";
@import "~@/assets/scss/mixin.scss";

.mine {
  width: 100%;
  height: 100%;
  background: $app-background-color;
  .mine-usename {
    text-align: center;
    color: #1a1a1a;
    font-size: 18px;
    padding: 15px;
  }
  .mine-avatar {
    text-align: center;

    img {
      width: 80px;
      height: 80px;
      border-radius: 40px;
      background-color: #e9e9e9;
    }
  }
  .mine-edit-info {
    text-align: center;
    padding: 15px;
    .icon-arrow-right {
      padding-left: 10px;
      font-size: 12px;
      color: #999999;
    }
  }
  .mine-row {
    display: flex;
    flex-direction: row;
  }
}

.sub-item {
  color: #888;
}
.slide {
  padding: 0 20px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
}
.animate {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
}
</style>
